<template>
  <div class="collect-test">
    <div class="test-header">
      <el-button plain size="mini" icon="el-icon-arrow-left" @click="goback">返回</el-button>
      <el-checkbox label="多级网址只采集第一条"></el-checkbox>
    </div>
    <div class="site-content">
      <div class="the-title">网址</div>
      <div class="tree-block">
        <el-tree :data="data" :props="defaultProps">
        </el-tree>
      </div>
    </div>
    <div class="collect-logs">
      <div class="the-title">网址采集日志</div>
      <div class="logs-block"></div>
    </div>
    <div class="statistics-info">
      统计信息: 0级网址146个, 1级网址2919个
    </div>
  </div>
</template>
<script>
export default {
  name: 'CollectTest',
  data () {
    return {
      /* eslint-disable */
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      /* eslint-enable */
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    goback () {
      this.$emit('goback')
    }
  }
}
</script>
<style lang="scss" scoped>
  .collect-test {
    padding: 0 20px;

    .test-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
    }
    .the-title {
      padding: 5px 20px;
      border-top: 1px solid #dfdfdf;
      border-bottom: 1px solid #dfdfdf;
      background: #dfdfdf;
    }
    .site-content {
      .tree-block {
        height: 380px;
        overflow-y: auto;
        border-bottom: 1px solid #dfdfdf;
      }
    }
    .collect-logs {
      .logs-block {
        height: 300px;
        overflow-y: auto;
        border-bottom: 1px solid #dfdfdf;
      }
    }
    .statistics-info {
      padding: 10px 0;
    }
  }

</style>
